<template>
	<view class="">
		<view class="product">
			<view class="list" v-for="(item, index) in productList" @tap="todetail(index)">
				<view class="pic"><image :src="item.pic" mode=""></image></view>
				<view class="info">
					<view class="info_tilte">{{item.title}}</view>
					<view class="desc">{{item.desc}}</view>
					<view class="volume" v-if="item.volume">月销量{{item.volume}}件</view>
					<view class="standard" v-if="item.standard">{{item.standard}}</view>
					<view class="price">
						<view class="">
							<text class="price_now">￥{{item.price}}</text>
							<text class="price_line">￥{{item.line_price}}</text>
						</view>
						<view class="num" v-if="item.num">
							*{{item.num}}
						</view>
					</view>
					<view v-if="!item.num" class="addcart" @tap.stop="addcart($event)"><image src="../../static/image/mine/index/add.png" mode=""></image></view>
					<!-- <slot @tap="change(index,key)" name="add_delet"></slot> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['productList'],
	data() {
		return {
		
		};
	},
	methods: {
		// todetail (index) {
		// 	uni.navigateTo({
		// 		url: '/pageB/classify/productdetail?productid=' + index
		// 	})
		// },
		addcart (e) {
			console.log(e);
		}
	}
};
</script>

<style lang="less" scoped>
.product {
	background-color: #ffffff;
	padding: 0 15upx;
	box-sizing: border-box;
}
.list {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.pic {
		width: 160upx;
		height: 160upx;
		margin-right:30upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.info {
		flex: 1;
		position: relative;
		padding: 30upx 0;
		box-sizing: border-box;
		border-bottom: 2upx solid #e1e1e1;
		.info_tilte {
			height: 80upx;
			font-size: 28upx;
			color: #333333;
			line-height: 40upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			// height: 80upx;
		}
		.desc {
			font-size: 24upx;
			color: #666;
			line-height: 32upx;
		}
		.volume {
			font-size: 24upx;
			color: #999;
			margin-top: 20upx;
		}
		.standard {
			display: inline-block;
			height: 40upx;
			background-color: #f9f9f9;
			color: #999999;
			padding: 0 10upx;
			box-sizing: border-box;
			border-radius: 8upx;
			line-height: 40upx;
			font-size: 24upx;
			margin-bottom: 10upx;
		}
		.price {
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 40upx;
			
			.price_now {
				font-size: 28upx;
				color: #f73e2f;
				line-height: 40upx;
				line-height: 28upx;
				margin-right: 10upx;
			}
			.price_line {
				font-size: 24upx;
				line-height: 24upx;
				color: #999;
				line-height: 40upx;
				text-decoration: line-through;
			}
			.num {
				font-size: 28upx;
				color: #999999;
				line-height: 28upx;
				margin-top: -8upx;
			}
		}
		.addcart {
			position: absolute;
			bottom: 30upx;
			right: 0;
			width: 52upx;
			height: 52upx;
			
			image {
				width: 100%;
				height: 100%;
			}
		}
		.add_delet {
			position: absolute;
			bottom: 20upx;
			right: 0;
			z-index: 9;
			.delet {
				text-align: right;
				.icon {
					font-size: 28upx;
					color: #999999;
				}
			}
			.add {
				.icon {
					font-size: 28upx;
					color: #999999;
				}
				text {
					font-size: 28upx;
					margin: 0 10upx;
				}
			}
		}
	}
}
.list:last-child .info {
	border-bottom: none;
}
</style>
